import React, { useState, useEffect } from "react";
import { Card, Input, Space, Button, Row, Col, message } from "antd";
import request from "../../utils/request";
import "./index.css";

const MobileLogin = () => {
    const [mobile, setMobile] = useState("");
    const [btnText, setBtnText] = useState("获取验证码");
    const [isClicked, setIsClicked] = useState(false);
    const [code, setCode] = useState("");

    const onGetCodeCLicked = async () => {
        // 不能为空
        if (!mobile) {
            return message.error("请输入手机号码");
        }
        // 手机号格式
        if (!/^1[3579]\d{9}$/.test(mobile)) {
            return message.error("请输入正确的手机号");
        }
        // 是不是已经点击了按钮
        if (!isClicked) {
            // 如果没有锁定，就可以发
            // 先上锁，避免重复点击
            setIsClicked(true);
            // 倒计时时间
            let num = 60;
            // 先设置文本按钮变化，否则就要等一秒才变
            setBtnText(`重新获取验证码(${num}S)`);
            // 设置一个定时器
            let intervalId = setInterval(() => {
                if (num > 1) {
                    num--;
                    setBtnText(`重新获取验证码(${num}S)`);
                    // 倒计时完了
                } else {
                    // 恢复按钮状态
                    setBtnText("获取验证码");
                    // 解锁，可以继续点击了
                    setIsClicked(false);
                    // 结束定时器，别再倒计时了
                    clearInterval(intervalId);
                }
            }, 1000);
            // 发送获取验证码请求
            const res = await request.post("/codes", { mobile });
            // 如果发送不成功，提示错误信息
            if (res.code !== 201) {
                message.error(res.message);
                return;
            }
            // 发送成功，提示成功，并请用户输入验证码
            message.success("验证码发送成功，请注意查收");
        }
    };

    const onLoginClicked = async () => {
        const canRequest = mobile && code;
        if (canRequest) {
            const res = await request.post("/login", { mobile, code });
            console.log("res", res);
        }
    };

    return (
        <div className="mobile-login">
            <Card title="手机号登录">
                <Space
                    direction="vertical"
                    style={{ width: "100%" }}
                    size="middle"
                >
                    <Input
                        placeholder="请输入手机号"
                        onChange={(e) => setMobile(e.target.value)}
                    />

                    <Row justify="space-between">
                        <Col span={12}>
                            <Input
                                placeholder="请输入验证码"
                                onChange={(e) => setCode(e.target.value)}
                            />
                        </Col>

                        <Button
                            disabled={isClicked}
                            type="primary"
                            onClick={onGetCodeCLicked}
                        >
                            {btnText}
                        </Button>
                    </Row>

                    <Button type="ghost" onClick={onLoginClicked} block>
                        登录
                    </Button>
                </Space>
            </Card>
        </div>
    );
};

export default MobileLogin;
